<template>
  <div class="form-page">
    <Card :bordered="false" :dis-hover="true">
      <p slot="extra" style="color: #999;font-size: 12px;">
        <label style="color: #FF3B30;">*</label> 为必填
      </p>
      <div class="company-box">
        <div>
          <Form ref="formModel" :rules="ruleValidate1" :model="bloc.form" :label-width="150">
            <div class="row">
              <div class="col">
                <FormItem label="产品名称:" prop="sortId" required>
                  <Select
                    v-model="bloc.form.sortId"
                    filterable
                    @on-change="handleChange(bloc.form.sortId)"
                    placeholder=''
                    clearable
                    class="wid"
                  >
                    <Option v-for="item in bloc.sortList" :value="item.id" :key="item.id">{{ item.sortName }}</Option>
                  </Select>
<!--                  <Input v-model="bloc.form.productId" prop="productId" class="wid"/>-->
                </FormItem>
              </div>
              <div class="col">
                <FormItem label="店铺名称:" prop="dealerName" required>
                  <Select
                    v-model="bloc.form.dealerName"
                    filterable
                    class="wid"
                    placeholder=''
                    clearable
                  >
                    <Option v-for="item in bloc.dealerList" :value="item.DealerID" :key="item.DealerID">{{ item.DealerName }}</Option>
                  </Select>
                </FormItem>
              </div>
            </div>

            <div class="row">
              <div class="col">
                <FormItem label="产品型号:" prop="modelId" required>
                  <Select
                    v-model="bloc.form.modelId"
                    filterable
                    clearable
                    :placeholder="bloc.isinfo"
                    class="wid"
                  >
                    <Option v-for="item in bloc.modelList" :value="item.modelName" :key="item.id">{{ item.modelName }}</Option>
                  </Select>
<!--                  <Input v-model="bloc.form.productModel" prop="productModel" class="wid"/>-->
                </FormItem>
              </div>
              <div class="col">
                <FormItem label="订单号:" prop="remarkOrderNumber" required>
                  <Input v-model="bloc.form.remarkOrderNumber" prop="remarkOrderNumber" class="wid"/>
                </FormItem>
              </div>
            </div>

            <div class="row">
              <div class="col">
                <FormItem label="数量:" prop="Quantity" required>
                  <Input v-model="bloc.form.Quantity" prop="Quantity" class="wid"/>
                </FormItem>
              </div>
            </div>

            <div style="margin-bottom: 30px">
              <div class="dashed-line-with-text">
                <span class="line"></span>
                <span class="text">客户信息</span>
              </div>
            </div>

            <div class="row">
              <div class="col">
                <FormItem label="客户名称:" prop="ConsigneeName" required>
                  <Input v-model="bloc.form.ConsigneeName" prop="ConsigneeName" placeholder="请输入客户姓名" class="wid"/>
                </FormItem>
              </div>
              <div class="col">
                <FormItem label="客户联系信息:" prop="message">
                  <Input
                    type="textarea"
                    :rows="3"
                    v-model="bloc.form.message"
                    placeholder="请粘贴客户姓名电话地址,目前只能支持一个地址信息"
                    style="width: 400px"
                  />
                </FormItem>
                <h3  @click="identify" class="identify">
                  立即识别
                </h3>
                <div class="word">例如:椅小鑫 13600000000 *省*市*区(市/县)*路*</div>
                <div class="word">例如:椅小鑫,13600000000,*省*市*区(市/县)*路*</div>
              </div>
            </div>

            <div class="row" style="z-index: 99;position: absolute;top: 440px">
              <div class="col">
                <FormItem label="联系电话:" prop="MobilePhone" required>
                 <Input v-model="bloc.form.MobilePhone" prop="MobilePhone" placeholder="请输入联系电话" class="wid"/>
                </FormItem>
              </div>
            </div>

            <div class="row" style="z-index: 99;position: absolute;top: 525px">
              <div class="col">
                <FormItem label="客户地址:" prop="ConsigneeAddress" required>
                  <Input v-model="bloc.form.ConsigneeAddress" prop="ConsigneeAddress" placeholder="请输入客户详细地址" class="wid"/>
                </FormItem>
              </div>
            </div>

            <div style="margin-bottom: 30px;margin-top: 100px">
              <div class="dashed-line-with-text">
                <span class="line"></span>
                <span class="text">其他信息</span>
              </div>
            </div>

            <div class="row">
              <div class="col">
                <FormItem label="备注:" prop="remark">
                  <Input
                    type="textarea"
                    :rows="4"
                    v-model="bloc.form.remark"
                    maxlength="150"
                    show-word-limit
                    placeholder="请填写安装要求,维修故障等(不超过150字)"
                    style="width: 400px"
                  />
                </FormItem>
                <h3  @click="makeRemark" class="makeRemark">
                  默认备注
                </h3>
              </div>
            </div>
          </Form>
        </div>
      </div>
      <div style="margin-top: 20px;left: -5%;position: relative">
        <AppButton
          ref="save"
          style="margin-left: 30px;width: 100px;height: 40px;"
          type="primary"
          :disabled="bloc.loading"
          @click="handleOk('formModel')"
        >提交
        </AppButton>
      </div>
    </Card>
  </div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import {store} from '@/store/Store';
    import {Route} from 'vue-router';
    import {FormBloc} from './orderonlineBloc';
    import { AppButton } from '@/type/AppButton';
    import { isEmpty } from '@/base/util/Strings';

    @Component({
    })

    export default class extends Vue {
        disabled: boolean = true;
        beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
            next(vm => {
                vm.bloc.type = vm.tepee;
                vm.bloc.getAllSort();
                vm.bloc.getAllDealer();
                //     .then((res) => {
                //     vm.bloc.modelListAll = res;
                // });
            });
        }
        bloc = new FormBloc();
        get tepee() {
            return store.state.user.tepee
        }
        get uploadHeaders() {
            return {
                'Authorization': 'Bearer ' + store.state.auth.accessToken
            }
        };
        handleChange(sortId) {
            this.bloc
                .getAllModel(1, 1000, sortId)
                .then((res) => {
                    this.bloc.isinfo = '请选择';
                });
        }
        validateId2 = (rule: any, value: string, callback: any) => {
            const regNum = /^\d+$/;
            if (isEmpty(this.bloc.form.Quantity)) {
                callback(new Error('数量不能为空'));
            } else if (!isEmpty(this.bloc.form.Quantity) && !regNum.test(this.bloc.form.Quantity)) {
                callback(new Error('数量只能为正整数'));
            } else {
                callback();
            }
        };
        validatesId = (rule: any, value: string, callback: any) => {
            if (this.bloc.form.sortId === 0) {
                callback(new Error('产品名称不能为空'));
            } else {
                callback();
            }
        };
        validatemId = (rule: any, value: string, callback: any) => {
            if (this.bloc.form.modelId === '') {
                callback(new Error('产品型号不能为空'));
            } else {
                callback();
            }
        };
        ruleValidate1: any = {
            // sortId: [{required: true, message: '产品名称不能为空', trigger: 'blur'}],
            sortId: [{validator: this.validatesId, trigger: 'blur'}],
            modelId: [{validator: this.validatemId, trigger: 'blur'}],
            // modelId: [{required: true, message: '产品型号不能为空', trigger: 'blur'}],
            ConsigneeName: [{required: true, message: '客户姓名不能为空', trigger: 'blur'}],
            MobilePhone: [{required: true, message: '联系方式不能为空', trigger: 'blur'}],
            ConsigneeAddress: [{required: true, message: '客户地址不能为空', trigger: 'blur'}],
            dealerName: [{required: true, message: '店铺名称不能为空', trigger: 'blur'}],
            remarkOrderNumber: [{required: true, message: '订单号不能为空', trigger: 'blur'}],
            Quantity: [{validator: this.validateId2, trigger: 'blur'}]
        };
        enable = false;
        $refs!: {
            save: AppButton
            formModel: HTMLFormElement
        };
        identify() {
            let val = this.bloc.form.message.trim();
            let msgPhone;
            let msgArr;
            const separatorRegex = /[\s,]+/;
            let regPhone = /\d{11}/;
            msgPhone = val.match(regPhone);
            msgArr = val.split(regPhone);
            console.log(msgPhone[0], msgArr)
            if (msgPhone[0] && msgArr.length === 2) {
                // 0为姓名位置；1为电话位置；2为地址位置
                let regName = /^[\u4e00-\u9fa5]+$/;
                let regPhone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
                let regAddress = /^([\u4e00-\u9fa5]+省)([\u4e00-\u9fa5]+市)([\u4e00-\u9fa5]+[市县区])([\u4e00-\u9fa5]+路)/;
                if (regName.test(msgArr[0].replace(separatorRegex, ''))) {
                    this.bloc.form.ConsigneeName = msgArr[0].replace(separatorRegex, '');
                } else {
                    this.bloc.form.ConsigneeName = '';
                    this.$Message.error('客户姓名只能输入汉字');
                }
                if (regPhone.test(msgPhone[0])) {
                    this.bloc.form.MobilePhone = msgPhone[0];
                } else {
                    this.bloc.form.MobilePhone = '';
                    this.$Message.error('联系方式格式不正确');
                }
                if (regAddress.test(msgArr[1].replace(separatorRegex, ''))) {
                    this.bloc.form.ConsigneeAddress = msgArr[1].replace(separatorRegex, '');
                } else {
                    this.bloc.form.ConsigneeAddress = '';
                    this.$Message.error('客户地址格式不正确,必须为*省*市*区(市/县)*路*');
                }
            } else {
                this.$Message.error('客户联系信息格式不正确');
            }
        }
        makeRemark() {
            this.bloc.form.remark = '默认备注';
        }
        handleOk(name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.bloc.addOrderonline(this.bloc.form).then(res => {
                        this.$Message.success('保存成功');
                        setTimeout(function () {
                            location.reload();
                        }, 1000);
                        this.bloc.loading = false;
                    }).catch(err => {
                        // this.$Message.error('保存失败');
                        this.$Message.error(err.message);
                        this.bloc.loading = false;
                    });
                }
            });
        }
    }
</script>

<style lang="less" scoped>
  /deep/ .ivu-form-item-content {
    justify-content: start !important;
    align-items: center !important;
  }
  /deep/ .ivu-form-item-label {
    padding-top: 0;
  }
  /deep/ .ivu-input-wrapper {
    display: block;
  }
  /deep/ .ivu-select {
    display: block;
  }
  .company-box {
    display: flex;
    flex-direction: column;
  }
  .divider-short {
    width: 4px;
    height: 24px;
    background: #0079FE;
    margin-right: 10px;
  }
  .ivu-row-flex-middle {
    font-weight: bolder;
    font-size: 16px;
    margin-bottom: 28px;
  }
  .wid {
    width: 400px;
  }
  .award-item {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
  }
  .row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    margin-right: 100px;
  }

  .col {
    flex-basis: 50%;
    margin-right: 10px;
  }

  .dashed-line-with-text {
    width: 100%;
    position: relative;
    display: inline-block;
    height: 1em;
    line-height: 1em;
  }

  .line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-image: repeating-linear-gradient(
      to right,
      gainsboro,
      gainsboro 10px,
      transparent 10px,
      transparent 20px
    );
    transform: translateY(-40%);
  }

  .text {
    position: relative;
    left: -5%;
    display: inline-block;
    padding: 0 30px;
    background-color: white;
    color: #a8a8b6;
    z-index: 99;
  }
  .identify{
    color: #37afff;
    font-size: small;
    text-align: left;
    position: relative;
    left: 23%;
    top: -8%;
  }
  .makeRemark {
    color: #37afff;
    font-size: small;
    text-align: left;
    position: relative;
    left: 23%;
    top: -8%;
  }
  .word {
    color: #a8a8b6;
    font-size: revert;
    text-align: left;
    position: relative;
    left: 23%;
  }
</style>
